<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .loading {
      width: 50px;
      height: 50px;
      animation: 1s loading infinite linear;
      margin: auto;
    }

    @keyframes loading {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    .box {
      width: 100%;
      height: 150px;
      margin-top: 10px;
      background: #000;
      color: #fff;

      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div id="boxs">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
  </div>
  <img class="loading" src="/image/loading.svg" alt="" srcset="">
</body>
<script>
  // https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserver
  const loading = document.querySelector('.loading');
  let isLoading = false
  
  const ob = new IntersectionObserver((entries) => {
    console.log(entries)
    const entry = entries[0]
    if (entry.isIntersecting && !isLoading) {
      more()
      console.log('加载更多')
    }
  }, { threshold: 0.1 })
  ob.observe(loading)

  function more() {
    isLoading = true
    setTimeout(() => {
      const box = document.getElementById('boxs')
      const last = box.children[box.children.length - 1]
      for (let i = 1; i <= 5; i++) {
        const div = document.createElement('div')
        div.className = 'box'
        div.innerHTML = +last.innerHTML + i
        box.appendChild(div)
      }
      isLoading = false
    }, 2000)
  }
</script>

</html>